iT邦幫忙

2021 iThome 鐵人賽

DAY 10
0
Modern Web

JavaScript 嗨起來用 JS 做動畫 ε= ᕕ( ᐛ )ᕗ系列 第 10

Day10 - 今天只先鋪底座標軸,明天來畫 BMO

  • 分享至 

  • xImage
  •  
var canvasBmo = document.getElementById('canvasBmo');
var ctxBmo = canvasBmo.getContext('2d');
canvasBmo.width = 400;
canvasBmo.height = 400;

var draw = function (){
    ctxBmo.beginPath();
    ctxBmo.fillStyle = "rgba(0,0,0,0.2)";
    ctxBmo.strokeStyle = "rgba(0,0,0,0.2)";
    for(let i=1;i<9;i++){
        let pos = 50*i
        // 畫垂直線
        ctxBmo.moveTo(pos,0);
        ctxBmo.lineTo(pos,400);
        // 畫水平線
        ctxBmo.moveTo(0,pos);
        ctxBmo.lineTo(400,pos);
        // 寫軸 x 座標與 y 軸座標
        ctxBmo.fillText(pos,pos,10);
        ctxBmo.fillText(pos,0,pos);
    }
    ctxBmo.stroke();
    
    // BMO 身體
    ctxBmo.fillStyle = 'hsl(138, 39%, 64%)';
    ctxBmo.beginPath();
        ctxBmo.fillRect(50,50,300,300);
    ctxBmo.closePath();
}

今天的紀錄到這邊,如果路過的大俠有發現有什麼理解有出入的地方,希望能邦幫忙提點一波,乾蝦 ε= ᕕ( ᐛ )ᕗ


上一篇
Day09 - dat GUI
下一篇
Day11 - Bmo 眼睛嘴巴動起來
系列文
JavaScript 嗨起來用 JS 做動畫 ε= ᕕ( ᐛ )ᕗ17
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言